<template>
  <div id="app">
    <div class="bar">
      <a
        @click="close"
        class="close"
        href=""
      />
      <span>我要吐槽</span>
      <a
        @click="more"
        class="more"
        href=""
      />
    </div>
    <div class="main">
      <textarea
        v-model="tip"
        class="info"
        name="info"
        placeholder="请写下您对不凡UI（前端）部门的教学、生活等任何方面想要吐槽，或者改进的地方。所有的内容都将以匿名方式以最真实的内容传递给我们！我们将继续努力，第一时间处理反馈！字数不能超过300字"
      />
      <div class="course">
        <p class="tip">
          请选择所在班级
        </p>
        <div class="row">
          <div class="item">
            <input
              id="ui"
              @change="course='ui'"
              type="radio"
              checked
              name="course"
              value="ui"
            >
            <label for="ui">
              UI
            </label>
            <div
              :class="{disable:!disable}"
              @click="show"
              class="cls"
            >
              {{ selectCls.ui }}
              <div
                @click.stop=""
                class="mask"
              />
            </div>
            <!-- <select class="" name="" id="">
                            <option value="8">UI - 8月班</option>
                            <option value="9">UI - 9月班</option>
                            <option value="10">UI - 10月班</option>
                            <option value="11">UI - 11月班</option>
                        </select> -->
          </div>
          <div class="item">
            <input
              id="web"
              @change="course='web'"
              type="radio"
              name="course"
              value="web"
            >
            <label for="web">
              前端
            </label>
            <div
              :class="{disable:disable}"
              @click="show"
              class="cls"
            >
              {{ selectCls.web }}
              <div
                @click.stop=""
                class="mask"
              />
            </div>
            <!-- <select class="" name="" id="">
                            <option value="8">前端 - 8月班</option>
                            <option value="9">前端 - 9月班</option>
                            <option value="10">前端 - 10月班</option>
                            <option value="11">前端 - 11月班</option>
                        </select> -->
          </div>
        </div>
      </div>

      <div style="text-align:center;">
        <van-button
          @click="submit"
          :loading="loading"
          class="btn"
        >
          提交
        </van-button>
      </div>
    
      <van-popup
        v-model="showPicker"
        position="bottom"
      >
        <van-picker
          show-toolbar
          @confirm="onConfirm"
          @cancel="showPicker = false"
          :default-index="1"
          :columns="columns"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>

import axios from 'axios'
import Fingerprint2 from 'fingerprintjs2'
import { Popup, Picker, Toast, Button } from 'vant'

export default {
  name: 'App',
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Toast.name]: Toast,
    [Button.name]: Button,
  },
  data() {
      return {
          columns: [],
          showPicker: false,
          class_ui: [],
          class_h5: [],
          // 课程班级列表
          cls: {
              ui: [
                  'UI2020-8',
                  'UI2020-9',
                  'UI2020-10',
              ],
              web: [
                  '前端2020-8',
                  '前端2020-9',
              ]
          },
          class_id: undefined,
          tip: '', // 建议
          // 单选框状态/值
          course: 'ui',
          // 显示的选取班级
          selectCls: {
              ui: '',
              web: ''
          },
          loading: false
      };
  },
  created() {
      this.getFingerprint()
      axios({
        url: '/question/basedata',
        method: 'get',
      }).then(({ data : { data } }) => {
        console.log(data)
        const { class_h5, class_ui } = data
        this.class_h5 = class_h5.slice(0, 6)
        this.class_ui = class_ui.slice(0, 6)
        this.cls = {
          ui: class_ui.map(({ class_name }) => class_name),
          web: class_h5.map(({ class_name }) => class_name)
        }
        this.columns = this.cls[this.course]
        this.selectCls.ui = this.cls.ui[0]
        this.selectCls.web = this.cls.web[0]
        this.class_id = class_ui[0].id
      }).catch(err => console.log(err))
  },
  computed: {
      disable() {
        return this.course != 'web'
      },
      // 最终选择班级
      selected() {
          // return this.selectCls[this.course].replace(/[^0-9]/ig, "")
          return this.selectCls[this.course];
      }
  },
  methods: {
      getFingerprint() {
        // 获取指纹
        let fingerprint = undefined;
        if (window.requestIdleCallback) {
            requestIdleCallback(() => {
                Fingerprint2.get((components) => {
                    // 参数
                    var values = components.map(function(component) {
                        return component.value
                    });
                    // 指纹
                    fingerprint = Fingerprint2.x64hash128(values.join(''), 31)
                    localStorage.setItem('fingerprint', fingerprint)
                })
            })
        } else {
            setTimeout(function() {
                Fingerprint2.get(function(components) {
                    // 参数
                    var values = components.map(function(component) {
                        return component.value
                    });
                    // 指纹
                    fingerprint = Fingerprint2.x64hash128(values.join(''), 31)
                    localStorage.setItem('fingerprint', fingerprint)
                })
            }, 500)
        }
      },
      onConfirm(val, index) {
        console.log(index)
        this.selectCls[this.course] = val;
        this.class_id = this.course === 'ui' ? this.class_ui[index].id : this.class_h5[index].id
        this.showPicker = false
      },
      show() {
        this.columns = this.cls[this.course];
        this.showPicker = true;
      },
      submit() {
          if (!this.class_id) {
            Toast.fail('请选择班级');
            return
          }
          if (!this.tip) {
            Toast.fail('请填写意见');
            return
          }
          if (this.tip.length > 300) {
            Toast.fail('意见最多字数不能超过300');
            return
          }
          this.loading = true;
          axios({
            url: '/question',
            method: 'post',
            params: {
              class_id: this.class_id,
              content: this.tip,
              factor: localStorage.getItem('fingerprint') || '' // 指纹
            }
          })
          .then(() => {
            this.loading = false;
            Toast.success('提交成功');
            setTimeout(() => window.location.href = 'http://bufanui.com/', 2000)
            // this.close()
          })
          .catch(() => {
            this.loading = false;
            Toast.fail('网络中断');
          })
          
      },
      close() {
          // 关闭网页
          window.close()
      },
      more() {
          // 更多
      }
  }
}
</script>

<style>
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      outline: none;
  }

  .bar {
      width: 100vw;
      height: 11.7333vw;
      padding: 0 5.3333vw;
      /* padding-top: 11.7333vw; */
      background-color: #2A2A2A;
      line-height: 11.7333vw;
      display: flex;
      align-items: center;
      text-align: center;
  }

  .bar a {
      width: 7.4667vw;
      height: 7.4667vw;

  }

  .bar .close {
      background: url(./img/close.png) no-repeat center;
      background-size: cover
  }

  .bar .more {
      background: url(./img/more.png) no-repeat center;
      background-size: cover;

  }

  .bar span {
      flex: 1;
      font-size: 4.8vw;
      color: #FFFFFF;
  }

  .main {
      height: 193.0667vw;
      width: 100vw;
      padding: 0 5.3333vw;
      background: url(./img/bg.png) no-repeat center;
      background-size: cover;
  }

  .info {
      width: 89.3333vw;
      height: 86.6667vw;
      margin-top: 42.6667vw;
      margin-bottom: 6.4vw;
      padding: 4.2667vw 4vw;
      background-color: #fff;
      border-radius: 1.3333vw;
      border: none;
      resize: none;
      font-size: 3.7333vw;
      color: #7D836D;
      line-height: 5.3333vw;
  }

  .main .tip {
      font-size: 4.2667vw;
      color: #111;
      line-height: 6vw;
  }

  .main .row {
      display: flex;
      justify-content: space-between;
      margin-top: 2.6667vw;
  }

  .row input {
      display: none;
  }

  .row label {
      display: block;
      line-height: 6.6667vw;
      margin-bottom: 0.9333vw;
      font-size: 4.8vw;
      /* font-weight: bolder; */
  }

  .row label::before {
      display: inline-block;
      content: '';
      width: 4.8vw;
      height: 4.8vw;
      background: url(./img/check.png) no-repeat center;
      background-size: cover;
      vertical-align: -0.4667vw;
  }

  .row input:checked+label::before {
      background-image: url(./img/check_active.png);
  }

  .row input:checked~.cls {
      /* pointer-events: auto; */
      opacity: 1;
  }

  .row .cls {
      position: relative;
      /* display: block; */
      width: 42.6667vw;
      line-height: 9.6vw;
      border-radius: 1.3333vw;
      background: url(./img/down.png) no-repeat;
      background-size: 4.2667vw 4.2667vw;
      background-color: #fff;
      background-origin: content-box;
      background-position: right center;
      /* border: none; */
      padding: 0 3.7333vw;
      /* appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      pointer-events: none; */
      opacity: 0.8;
  }

  .row .cls.disable .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
  }

  .main .btn {
      width: 64vw;
      height: 11.7333vw;
      margin: 0 auto;
      margin-top: 6.4vw;
      background: #FFDE00;
      border-radius: 56px;
      text-align: center;
      font-size: 4.8vw;
      color: #000;
      line-height: 11.7333vw;
  }
</style>
